<template>
  <div class="field">
    <div class="field-img">
      <img :src="detail.imgUrl" alt="" />
    </div>
    <div class="field-info">
      <div class="field-title">{{ detail.title }}</div>
      <div class="field-discount">{{ detail.discount }}</div>
      <div class="field-characteristic">{{ detail.characteristic }}</div>
      <div class="field-amound">
        <div class="amound-num">婚宴价格：{{ detail.num }}</div>
        <div class="amound-num1">容纳桌数：{{ detail.num }}</div>
      </div>
      <div class="num-btn">
        <div class="btn">预约看店</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["detail"],
  data() {
    return {};
  },
  mounted() {},
  computed: {},
  methods: {},
};
</script>
<style scoped lang="less">
@import url("@css/index");

.field {
  flex: 1;
  .field-img {
    height: 297px;
    border: 1px solid #ccc;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .field-info {
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    padding-bottom: 10px;

    .field-title {
      background: #c4ad8d;
    }
    .field-discount {
      color: #b69757;
      border-bottom: 2px solid #ad9b78;
    }
    .field-characteristic {
      color: #7b7b7b;
      border-bottom: 2px solid #ad9b78;
    }
    .field-amound {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      color: #000;
      .amound-num {
      }
      .amound-num1 {
      }
    }
    .num-btn {
      .dis-cen();

      .btn {
        width: 100px;
        border-radius: 10px;
        padding: 5px;
        background: @backBg2;
      }
    }
  }
}
</style>
